<template>
  <div class="mod-config">
    <el-card class="main-card">
      <div class="toolbar">
        <div class="toolbar-left">
          <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle('', '', false)">
            新增一级分类
          </el-button>
          <el-button type="danger" icon="el-icon-delete" @click="deleteHandle()" :disabled="selectedIds.length <= 0"
                     v-if="selectedIds.length > 0">
            批量删除 ({{ selectedIds.length }})
          </el-button>
        </div>
        <div class="toolbar-right">
          <el-button icon="el-icon-refresh" @click="getDataList()">刷新</el-button>
        </div>
      </div>

      <div class="tree-container">
        <el-alert
          v-if="categoryTreeData.length === 0 && !dataListLoading"
          title="暂无分类数据"
          type="info"
          description="点击上方'新增一级分类'按钮创建新的分类"
          show-icon>
        </el-alert>

        <!--          默认全部展开default-expand-all-->
        <el-tree
          v-else
          :data="categoryTreeData"
          show-checkbox

          node-key="categoryCode"
          ref="tree"
          highlight-current
          :props="defaultProps"
          @check-change="handleCheckChange"
          :indent="30">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <div class="node-content">
              <div class="folder-icon" v-if="!node.isLeaf">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6H12L10 4Z"
                        :fill="getNodeColor(node.level)" stroke="#999" stroke-width="1"/>
                </svg>
              </div>
              <div class="file-icon" v-else>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14 2H6C4.9 2 4.01 2.9 4.01 4L4 20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8L14 2Z"
                        fill="#E6F7FF" stroke="#1890FF" stroke-width="1"/>
                  <path d="M14 2V8H20" stroke="#1890FF" stroke-width="1"/>
                </svg>
              </div>
              <span class="node-label">{{ node.label }}</span>
            </div>
            <div class="tree-node-actions">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-circle-plus-outline"
                @click="() => addOrUpdateHandle('', data.categoryCode, false)">
                新增
              </el-button>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-edit-outline"
                @click="() => addOrUpdateHandle(data.categoryCode, '', true)">
                编辑
              </el-button>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-delete"
                @click="() => deleteHandle(data.categoryCode)">
                删除
              </el-button>
            </div>
          </span>
        </el-tree>
      </div>
    </el-card>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
  import AddOrUpdate from './wmhGalaxyCategory-add-or-update'
  export default {
    data () {
      return {
        dataForm: {
          key: ''
        },
        categoryTreeData: [],
        defaultProps: {
          children: 'children',
          label: 'categoryName'
        },
        selectedIds: [],
        dataListLoading: false,
        addOrUpdateVisible: false
      }
    },
    components: {
      AddOrUpdate
    },
    activated () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/category/category/queryWormholeGalaxyCategoryList'),
          method: 'post',
          data: this.$http.adornData({
            isPage: false,
          })
        }).then(({ data }) => {
          if (data && data.success) {
            this.categoryTreeData = data.data
          } else {
            this.categoryTreeData = []
          }
          this.dataListLoading = false
        })
      },

      // 节点选中状态改变
      handleCheckChange(data, checked, indeterminate) {
        const checkedNodes = this.$refs.tree.getCheckedNodes(false, true);
        this.selectedIds = checkedNodes.map(node => node.categoryCode);
      },

      // 新增 / 修改
      addOrUpdateHandle (categoryCode, parentCategoryCode, isUpdate) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          if (isUpdate) {
            // 修改操作 - 传入要修改的分类代码
            this.$refs.addOrUpdate.init(categoryCode)
          } else {
            // 新增操作 - 传入父级分类代码
            this.$refs.addOrUpdate.init(null, parentCategoryCode)
          }
        })
      },

      // 删除
      deleteHandle (categoryCode) {
        var categoryCodes = categoryCode ? [categoryCode] : this.selectedIds;
        if (categoryCodes.length === 0) {
          this.$message.warning('请先选择要删除的分类');
          return;
        }

        this.$confirm(`确定对选中分类进行[${categoryCode ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/category/deleteBatchWormholeGalaxyCategory'),
            method: 'post',
            data: this.$http.adornData({
              ids: categoryCodes
            })
          }).then(({data}) => {
            if (data && data.success) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                  this.selectedIds = [];
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },

      // 获取节点颜色
      getNodeColor(level) {
        const colors = ['#FFD700', '#FFA500', '#FF6347', '#8A2BE2', '#4169E1', '#32CD32'];
        return colors[(level - 1) % colors.length];
      }
    }
  }
</script>

<style scoped>
.mod-config {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f4 100%);
  min-height: calc(100vh - 84px);
}

.header-section {
  margin-bottom: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.page-description {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.main-card {
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

/deep/ .el-card__body {
  padding: 0;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #eee;
  background: #fff;
}

.toolbar-left {
  display: flex;
  gap: 12px;
}

.toolbar-right {
  display: flex;
  gap: 12px;
}

.tree-container {
  padding: 24px;
  background-color: #fff;
  min-height: 500px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.custom-tree-node:hover {
  background-color: #f8f9fa;
  border-color: #e4e7ed;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.node-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.node-label {
  font-weight: 500;
  color: #303133;
  font-size: 15px;
}

.tree-node-actions {
  display: flex;
  gap: 12px;
}

.el-button--text {
  color: #909399;
  font-size: 14px;
  padding: 5px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.el-button--text:hover {
  color: #409EFF;
  background-color: #f2f6fc;
}

.el-tree {
  margin-top: 10px;
}

.el-tree-node__content {
  height: auto;
  padding: 2px 0;
}

.el-tree-node__content:hover {
  background-color: transparent;
}

/deep/ .el-tree-node.is-current > .el-tree-node__content {
  background-color: rgba(64, 158, 255, 0.1);
  border-radius: 8px;
}

/deep/ .el-tree-node:focus > .el-tree-node__content {
  background-color: transparent;
}

/deep/ .el-tree-node > .el-tree-node__children {
  padding-left: 30px;
}

/deep/ .el-checkbox__inner {
  border-radius: 4px;
}

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #409EFF;
  border-color: #409EFF;
}

.folder-icon, .file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
